<template>
  <div>

    <mh></mh>

    <main class="" id="main-collapse">

    <div class="hero-full-wrapper">
       <div v-masonry transition-duration="0.3s" item-selector=".grid-item" class="grid">
       <div class="gutter-sizer"></div>
         <div class="grid-sizer"></div>

         <div v-masonry-tile class="grid-item">
           <img class="img-responsive" alt="" src="../assets/assets_2/images/img-12.jpg">
           <a href="./project.html" class="project-description">
             <div class="project-text-holder">
               <div class="project-text-inner">
                 <h3>视频标题</h3>
                 <p>视频简介</p>
               </div>
             </div>
           </a>
         </div>


         <div class="grid-item">
           <img class="img-responsive" alt="" src="../assets/assets_2/images/img-05.jpg">
           <a href="./project.html" class="project-description">
             <div class="project-text-holder">
               <div class="project-text-inner">
                 <h3>Vivamus vestibulum</h3>
                 <p>Discover more</p>
               </div>
             </div>
           </a>
         </div>

         <div class="grid-item">
           <img class="img-responsive" alt="" src="../assets/assets_2/images/img-13.jpg">
           <a href="/" class="project-description">
             <div class="project-text-holder">
               <div class="project-text-inner">
                 <h3>Vivamus vestibulum</h3>
                 <p>Discover more</p>
               </div>
             </div>
           </a>
         </div>
         <div class="grid-item">
           <img class="img-responsive" alt="" src="../assets/assets_2/images/img-04.jpg">
           <a href="/" class="project-description">
             <div class="project-text-holder">
               <div class="project-text-inner">
                 <h3>Vivamus vestibulum</h3>
                 <p>Discover more</p>
               </div>
             </div>
           </a>
         </div>

         <div class="grid-item">
           <img class="img-responsive" alt="" src="../assets/assets_2/images/img-07.jpg">
           <a href="/" class="project-description">
             <div class="project-text-holder">
               <div class="project-text-inner">
                 <h3>Vivamus vestibulum</h3>
                 <p>Discover more</p>
               </div>
             </div>
           </a>
         </div>

         <div class="grid-item">
           <img class="img-responsive" alt="" src="../assets/assets_2/images/img-11.jpg">
           <a href="/" class="project-description">
             <div class="project-text-holder">
               <div class="project-text-inner">
                 <h3>Vivamus vestibulum</h3>
                 <p>Discover more</p>
               </div>
             </div>
           </a>
         </div>

         <div class="grid-item">
           <img class="img-responsive" alt="" src="../assets/assets_2/images/img-10.jpg">
           <a href="/" class="project-description">
             <div class="project-text-holder">
               <div class="project-text-inner">
                 <h3>Vivamus vestibulum</h3>
                 <p>Discover more</p>
               </div>
             </div>
           </a>
         </div>
         <div class="grid-item">
           <img class="img-responsive" alt="" src="../assets/assets_2/images/img-03.jpg">
           <a href="/" class="project-description">
             <div class="project-text-holder">
               <div class="project-text-inner">
                 <h3>Vivamus vestibulum</h3>
                 <p>Discover more</p>
               </div>
             </div>
           </a>
         </div>



       </div>
     </div>
    </main>





  </div>
</template>




<script>
  import mh from './mh'


export default {
  data () {
    return {
      msg: "这是一个变量"
    }
  },
  components:{
    'mh':mh
  },

  mounted:function(){


},
  methods:{
      changetest(index){
          this.clicked = index;
      }
  }
}


</script>

<style>



</style>
